@import "site-variables";

body {
	font-family: $MainFontFamily, Georgia, serif;
	font-size: 1.5em; // TODO: This doesn't seem wise. A different selector and/or use of px may be more appropriate?
	color: $main-color;
	background: $background-color;
    background-image: url('/Content/images/background-sprite.png');
	padding-top: 60px; /* required for BS .navbar-fixed */
}

header {
	margin-bottom: $text-gutter;
}

blockquote {
	font-size: inherit;
	font-style: italic;
}

a {
	color: $action-color-darker;
	&:hover { 
		text-decoration: none;
		color: $action-color;
	}
}

.img-bordered {
	border: 1px solid $main-color;
}


@media (min-width: 992px) { 
	.single-topic-table {
		td, th {
			white-space: nowrap;
		}

		.main-topic {
			white-space: normal;
			width: 100%;
		}
	}
}

// Fix for iOS / Android devices zooming in a tiny little bit (and not zooming out anymore). See: http://stackoverflow.com/q/2989263/419956
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
  }
}

// Fix, the site's font does not show well with Bootstrap's label styling
.label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.navbar-inverse,
.navbar-inverse .dropdown-menu {
	background-color: $main-color;
}

.navbar-inverse .navbar-nav,
.navbar-inverse .dropdown-menu {
	li > a {
		color: $background-color;
	}
	
	li:hover, 
	li.active > a, 
	li.active > a:hover,
	li > a:hover {
		color: $background-color;
		background: $action-color;
	}
}

.title {
	border-bottom: 1px solid $background-color-darker;
	clear: both;
	margin-bottom: $text-gutter;

	a { 
		color: $main-color-lighter; 
		font-size: 3.5em;
		&:hover { color: $action-color; }
	}
}

.panel-primary {
	color: $background-color;
	background-color: $main-color;
	border-width: 0;

	h1 {
		font-size: 1.65em;
		margin-top: $text-gutter / 2;
	}

	h2 {
		font-size: 1.3em;
		margin-top: 0;
	}
	
	a {
		color: $action-color-lighter;
		&:hover { 
			text-decoration: none;
			color: $action-color;
		}
	}
}

.panel-default {
	background-color: $background-color-darker;
}

.cover {
	margin-right: 50px;

	.back, .front {
		background-color: $background-color-darker;
		border: 1px solid #BBB;
		height: 300px;
	}
}

.goodreads {
	margin: 0;

	iframe {
		border: 1px solid $background-color-darker;
		background-color: $background-color;
	}
}